<template>
	<div id="home">
		<el-container style="height: 100%">
			<el-aside width="200px">
				<el-menu
					default-active="2"
					class="el-menu-vertical-demo"
					@open="handleOpen"
					@close="handleClose"
				>
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>导航一</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group title="分组2">
							<el-menu-item index="1-3">选项3</el-menu-item>
						</el-menu-item-group>
						<el-submenu index="1-4">
							<template slot="title">选项4</template>
							<el-menu-item index="1-4-1">选项1</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-menu-item index="2">
						<i class="el-icon-menu"></i>
						<span slot="title">导航二</span>
					</el-menu-item>
					<el-menu-item index="3" disabled>
						<i class="el-icon-document"></i>
						<span slot="title">导航三</span>
					</el-menu-item>
					<el-menu-item index="4">
						<i class="el-icon-setting"></i>
						<span slot="title">导航四</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header height="60px">
					<el-button type="text">
						<i class="el-icon-setting" />
					</el-button>
					<p>首页</p>
					<div class="avatar">
						<el-avatar fit="scale-down" size="medium" @error="true">
							<img
								src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
							/>
						</el-avatar>
						<div class="name">管理员</div>
						<el-dropdown trigger="hover" @command="handleCommand">
							<span class="el-dropdown-link">
								<i class="el-icon-caret-bottom" />
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									v-for="item in dropdownMenu"
									:key="item.command"
									:command="item.command"
									:icon="item.icon"
									>{{ item.label }}</el-dropdown-item
								>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-header>
				<el-main>
					<div class="main">
						<p class="title">首页</p>
						<p>版本号：{{ version }}</p>
						<div class="flex">
							Vuex：
							<button @click="changeNum(count - 1)">-</button>
							<div class="flex">{{ count }}</div>
							<button @click="changeNum(count + 1)">+</button>
						</div>
						<button class="btn" @click="toLogin">前往登录</button>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
// 这里主要是熟悉一下vuex的map辅助函数 不使用map批量导出的话可以直接this.$store.state.属性名访问state的属性 通过this.$store.commit(方法名,参数)使用mutations中的方法 action相当于异步的mutations
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			dropdownMenu: [
				{ command: 'a', icon: 'el-icon-lock', label: '修改密码' },
				{
					command: 'b',
					icon: 'el-icon-switch-button',
					label: '退出登录',
				},
			],
		}
	},
	methods: {
		handleOpen(key, keyPath) {
			console.log(key, keyPath)
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath)
		},
		handleCommand(command) {
			console.log(command == 'a' ? '修改密码' : '退出登录')
		},
		toLogin() {
			this.$router.push('login')
		},
		...mapMutations({
			changeNum: 'changeCount',
		}),
	},
	computed: {
		...mapState({
			version: (state) => state.version,
			count: (state) => state.count,
		}),
	},
}
</script>
<style lang="less">
#home {
	height: 100%;
	& > .el-container {
		width: 100%;
		height: 100%;
		& > .el-aside {
			& > .el-menu {
				height: 100%;
			}
		}
	}
	.el-header {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
		> .el-button {
			font-size: 20px;
		}
		> p {
			flex: auto;
			padding-left: 10px;
			font-size: 15px;
			font-weight: bold;
			color: #409eff;
		}
		.avatar {
			flex: auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.el-avatar,
			.name {
				font-size: 14px;
				margin-right: 10px;
			}

			.el-dropdown-link {
				font-size: 20px;
			}
		}
	}
	.main {
		padding-top: 50px;
		.title {
			font-size: 20px;
		}
		p {
			padding-top: 10px;
			text-align: center;
		}

		.btn {
			padding: 10px 15px;
			color: #000;
			display: block;
			outline: none;
			border: none;
			margin: 50px auto;
			background: rgb(106, 255, 243);
			&:active {
				opacity: 0.6;
			}
		}
	}
}
</style>
